<template>
    <div>
        <home-header></home-header>
        <home-swiper :list="swiperList"></home-swiper>
        <home-icons :list="iconsList"></home-icons>
        <home-recommend :list="recommendList"></home-recommend>
        <home-weekend :list="weekendList"></home-weekend>  
    </div>

</template>
<script>
import HomeHeader from '@/components/HomeHeader.vue'
import HomeSwiper from '@/components/HomeSwiper.vue'
import HomeIcons from '@/components/HomeIcons.vue'
import HomeRecommend from '@/components/HomeRecommend.vue'
import HomeWeekend from  '@/components/HomeWeekend'
import axios from 'axios'
import { mapState } from 'vuex'

export default {
    name:'Home',
    components:{
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
        HomeWeekend
    },
    data(){
        return{
            swiperList:[],
            iconsList:[],
            recommendList:[],
            weekendList:[],
            lastCity:''
        }
    },
    computed:{
        ...mapState(['city'])
    },
    methods:{
        getHomeInfo(){
            axios.get('/api/index.json?city='+this.city).then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc(res){
            const data = res.data
            if(data.ret && data.data){
                this.swiperList = data.data.swiperList
                this.iconsList = data.data.iconList
                this.recommendList = data.data.recommendList
                this.weekendList = data.data.weekendList
            }
        }
    },
    mounted(){
        this.lastCity = this.city
        this.getHomeInfo()
    },
    activated (){
        if(this.city !== this.lastCity){
            this.lastCity = this.city
            this.getHomeInfo()
        }

    }
}
</script>
<style scoped>

</style>